<template>
  <div ref="boxwrap" class="PersonnelAnalysisSecond">
    <div class="time-pick">
      <span>选择月份 </span>
      <el-date-picker
        v-model="month"
        type="month"
        placeholder="选择月份"
        :clearable="false"
        format="yyyy-MM"
        value-format="yyyy-MM"
      />
    </div>
    <div class="main-content" @click="thirdPage">
      <div class="chart-wrap">
        <total-line id="total-personnel-line" height="100%" width="100%" :title="month+'人员趋势图'" />
      </div>
    </div>

    <vxe-modal
      v-model="showThirdPage"
      width="700"
      height="500"
      show-zoom
      class-name="layer-style"
    >
      <template #title>
        <span>人员分析三阶</span>
      </template>
      <template #default>
        <personnel-analysis-third :params="thirdParam" />
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import TotalLine from './charts/personnel/Line'
import { parseTime } from '@/utils'
import PersonnelAnalysisThird from '@/views/screenThird/PersonnelAnalysisThird'

export default {
  name: 'PersonnelAnalysisSecond',
  components: { TotalLine, PersonnelAnalysisThird },
  data() {
    return {
      month: '2021-11',
      showThirdPage: false,
      thirdParam: {}
    }
  },
  created() {
    this.month = parseTime(new Date(), '{y}-{m}')
  },
  methods: {
    thirdPage() {
      this.thirdParam = {
        regionid: this.regionid,
        lineId: this.lineId,
        regionName: '',
        lineName: ''
      }
      this.showThirdPage = true
    }
  }
}
</script>

<style lang="scss">
.PersonnelAnalysisSecond {
    width: 100%;
    height: 100%;

    .main-content {
      width: 100%;
      height: calc(100% - 46px);

      .chart-wrap {
          width: 100%;
          height: 100%;
      }
    }
}
</style>
